<template>
  <div style="background: #f7faff; width: 100%; overflow: hidden">
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/news' }"
          >资讯动态</el-breadcrumb-item
        >
        <el-breadcrumb-item>资讯详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <div class="isleft">
        <p class="title">
          {{ this.obj.title }}
        </p>
        <p class="date">发布于： {{ this.obj.create_time.split(" ")[0] }}</p>
        <p class="text" v-html="obj.content"></p>
      </div>
      <div class="isright">
        <p class="text1">相关资讯</p>
        <p
          class="text2"
          @click="goDetail(item)"
          v-for="(item, index) of newList"
          :key="index"
        >
          {{ item.title }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/request";
export default {
  data() {
    return {
      obj: {},
      newList: [],
    };
  },
  methods: {
    goDetail(item) {
      this.obj = item;
    },
    getList() {
      axios({
        method: "get",
        // url:'/api/index/feedback/create',
        url: "https://b.taijieyun.com/admin/article/list",
        params: { page: 1, limit: 4, category: this.obj.category },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.newList = res.data.data.list;
          }
        })
        .catch((err) => {
          this.$message.error("服务器错误");
        });
    },
  },
  created() {
    new Promise((resolve, reject) => {
      let data = localStorage.getItem("obj");
      if (data) {
        this.obj = JSON.parse(data);
        resolve(this.obj);
      } else {
        this.obj = this.$route.params.item;
        resolve(this.obj);
        localStorage.setItem("obj", JSON.stringify(this.$route.params.item));
      }
    }).then(() => {
      this.getList();
    });
  },
  beforeDestroy() {
    localStorage.removeItem("obj");
  },
};
</script>
<style>
img {
  width: 100%;
  height: auto;
  max-width: 700px;
}
</style>
<style lang="scss" scoped>
.breadcrumb {
  margin: 26px auto 10px;

  width: 1320px;
  ::v-deep {
    .el-breadcrumb {
      .el-breadcrumb__item {
        .el-breadcrumb__inner {
          color: #0a54dc;
        }
        .is-link {
          color: #333333;
          font-weight: 400;
        }
      }
    }
  }
}
.content {
  margin: auto;

  width: 1320px;
  display: flex;
  justify-content: space-between;
  .isleft {
    width: 1000px;
    height: auto;
    min-height: 1269px;
    background: #fff;
    padding: 48px 50px 0;
    box-sizing: border-box;
    .title {
      margin-bottom: 12px !important;
      margin-top: 0px !important;
      font-size: 24px;
      font-weight: 600;
      color: #333333;
      line-height: 33px;
    }
    .date {
      font-size: 14px;
      font-weight: 400;
      color: #888a9c;
      line-height: 20px;
    }
    .text {
      text-align: justify;
    }
  }
  .isright {
    background: #fff;
    width: 296px;
    height: 293px;
    padding: 24px 16px;
    box-sizing: border-box;
    .text1 {
      font-size: 18px;
      font-weight: 500;
      color: #333333;
      line-height: 25px;
      margin: 0;
    }
    .text2 {
      font-size: 14px;
      font-weight: 400;
      color: #525466;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      cursor: pointer;
    }
  }
}
</style>